<template>
	<view class="con">

		<form @submit="formSubmit">
			<view class="category">
				<view class="ch">选择分类</view>
				<picker @change="bindPickerChange" :value="index" :range="array" :range-key="'catename'">
					<view class="uni-input">{{array[index].catename}}</view>
				</picker>
			</view>

			<view style="color: #666;">视频封面</view>
			<view class="cover-img">
				<image v-if="cover_img" :src="cover_img" mode=""></image>
				<view class="addIcon" @click="selectHeadPic">+</view>
			</view>
			
			<view style="color: #666;">视频链接</view>
			<view class="video-url">
				<video v-if="videoUrl" :src="videoUrl" object-fit="fill" :muted="true"></video>
				<view class="addIcon" @click="selectVideoUrl">+</view>
			</view>


			<textarea class="title" name="title" value="" placeholder="文章标题" />

			<button class="btn" type="primary" form-type="submit">添加</button>
		</form>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [],
				index: 0,
				cover_img: false,
				videoUrl: false,
				id: 1,
				login: []
			}
		},
		methods: {
			bindPickerChange(e) {
				this.index = e.detail.value
				this.id = this.array[this.index].id;
			},
			formSubmit(e) {
				// console.log(e);
				
				let title = e.detail.value.title;
				let id = this.id;
				let cover_img = this.cover_img;
				let video_url = this.videoUrl;
				let user_name = this.login.name;
				let user_img = this.login.headpic;
				
				uni.request({
					url: 'https://laijunlin.xyz/index/upload/videoadd',
					method: 'POST',
					data: {
						title,
						video_url,
						id,
						cover_img,
						user_name,
						user_img
					},
					header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
					success: (res) => {
						// console.log(res);
						uni.showToast({
							title: res.data
						})
						
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/video1/video1'
							})
						}, 1500)
				
					}
				});
			},

			/** 图片上传功能 */
			selectHeadPic() {
				let _this = this;
				uni.chooseImage({
					// 上传的数量
					count: 1,
					// 原图还是压缩图
					sizeType: ['compressed'],
					// 从相册选图或拍照
					sourceType: ['album', 'camera'],
					camera: 'back',  //采用后置摄像头
					success: res => {
						// console.log(res);
						uni.uploadFile({
							url: 'https://laijunlin.xyz/index/upload/image', 
							// 要上传文件的路径
							filePath: res.tempFilePaths[0],
							name: 'img',
							fileType: 'image',
							header: {
								'Content-Type': 'application/x-www-form-urlencoded'
							},
							success: (data) => {
								// let img = JSON.parse(data);
								let img = data.data;
								let newimg = img.substr(img.indexOf("\"") +1, img.lastIndexOf("\"") -1);
								let nimg = newimg.replace(newimg.charAt(newimg.lastIndexOf("\\")), '/')
								
								console.log(nimg);
								this.cover_img = nimg;
								
							}
						});
					},
					fail: err => {
						console.log(err);
					}
				})
			},
			
			// 上传视频
			selectVideoUrl() {
				wx.chooseMedia({
				  count: 1,  //上传视频的个数
				  mediaType:['video'],  //限制上传的类型为video
				  sourceType:['album', 'camera'], //视频选择来源
				  maxDuration: 58, //拍摄限制时间
				  camera: 'back',  //采用后置摄像头
				  success:res => {
					console.log(res);
					let tempFilePath=res.tempFiles[0].tempFilePath
					let duration=res.tempFiles[0].duration
					wx.uploadFile({
						url: 'https://laijunlin.xyz/index/upload/video',
						filePath: tempFilePath,
						name: 'video',
						// header: {
						// 	'Content-Type': 'application/x-www-form-urlencoded'
						// },
						success: (data) => {
						  let video = data.data;
						  let newvideo = video.substr(video.indexOf("\"") +1, video.lastIndexOf("\"") -1);
						  let nvideo = newvideo.replace(newvideo.charAt(newvideo.lastIndexOf("\\")), '/')
						  
						  // console.log(nvideo);
						  this.videoUrl = nvideo;
						},
					});
				  },
				})

			}

		},
		mounted() {
			uni.request({
				url: 'https://laijunlin.xyz/index/vclass/index',
				success: res => {
					console.log(res);
					this.array = res.data.data;
				}
			})
			
			uni.getStorage({
				key: 'userSession',
				success: res => {
					// console.log(res.data);
					this.login = res.data
				}
			});
		},

	}
</script>

<style scoped lang="scss">
	.con {
		padding: 30rpx;
	}

	.title {
		width: 100%;
		height: 260rpx;
		background-color: #edebee;
		margin-bottom: 20rpx;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.article {
		width: 100%;
		height: 600rpx;
		background-color: #edebee;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.btn {
		width: 100%;
		margin-top: 30rpx;

	}

	.category {
		display: flex;
		background-color: pink;
		width: 100%;
		height: 80rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		line-height: 80rpx;
		background-color: #edebee;

		.ch {
			color: #666;
			margin-right: 60rpx;
			margin-left: 20rpx;
		}
	}


	.cover-img {
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.cover-img input {
		border: 1px solid #edebee;
	}

	.cover-img image {
		width: 100px;
		height: 100px;
		background-color: #edebee;
		margin-right: 20px;
	}

	.cover-img .addIcon {
		width: 100px;
		height: 100px;
		background-color: #edebee;
		
		text-align: center;
		line-height: 100px;
		font-size: 80px;
		color: #fff;
	}
	
	.video-url {
		display: flex;
		width: 100%;
		margin-bottom: 20rpx;
		margin-top: 20rpx;
		align-items: center;
		video {
			width: 75%;
			height: 300rpx;
			margin-right: 5%;
		}
		
		.addIcon {
			background-color: #edebee;
			width: 20%;
			height: 70px;
			text-align: center;
			line-height: 70px;
			font-size: 60px;
			color: #fff;
		}
	}
</style>
